<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>视频详情</title>
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2384888_ojge9md3tr.css
    ">
    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="../css/online.css">
</head>

<body>
    <!-- 导航菜单 -->
    <nav>
        <div class="main">
            <img src="../img/public/logo.png" alt="" class="logo">
            <ul>
                <li><a href="../index.html">首页</a></li>
                <li class="check"><a href="javascript:;">同步课程</a></li>
                <li><a href="../index.html#jing">精品课程</a></li>
            </ul>
            <div class="search">
                <div class="left">课程<i class="iconfont icon-down"></i>
                </div>
                <input type="text" placeholder="搜索感兴趣的内容" id="keyWord">
                <img src="../img/public/search.png" alt="" id="searchByKeyword">
            </div>
            <div class="login" id="login">
                <a href="../pages/loginAndRegister/login.html">登陆</a> /
                <a href="../pages/loginAndRegister/register.html">注册</a>
            </div>
            <div class="user" id="user_list" style="display: inline-block !important">
                <img src="../img/login/user.png" alt="" id="userimg">
                <div class="userlist" id="ulist">
                    <ul id="userlist">
                        <li>我是用户名</li>
                        <li id="coursesCenter">课程中心</li>
                        <li>订单中心</li>
                        <li>资金管理</li>
                        <li class="person">个人中心</li>
                        <li class="out">退出登陆</li>
                    </ul>
                </div>
            </div>
            <!-- <div class="login">
                <a href="javascript:;">登陆</a> /
                <a href="javascript:;">注册</a>
            </div>
            <div class="user">
                <img src="../img/login/user.png" alt="">
                <div class="userlist">
                    <ul>
                        <li>我是用户名</li>
                        <li>课程中心</li>
                        <li>订单中心</li>
                        <li>资金管理</li>
                        <li>个人中心</li>
                        <li class="out">退出登陆</li>
                    </ul>
                </div>
            </div> -->
        </div>
    </nav>

    <!-- 主体内容 -->
    <main>
        <div class="row">
            <div class="left">热门城市</div>
            <div class="right">
                <ul id="areaContainer" class="filter" type="area">
                    <li><a class="active">不限</a></li>
                    <!-- <li><a>北京</a></li>
                    <li><a>上海</a></li>
                    <li><a>江苏</a></li>
                    <li><a>济南</a></li>
                    <li><a>河南</a></li>
                    <li><a>天津</a></li>
                    <li><a>沈阳</a></li>
                    <li><a>石家庄</a></li> -->
                </ul>
            </div>
        </div>
        <div class="row">
            <div class="left">按年级选择</div>
            <div class="right">
                <ul id="gradeList" class="filter" type="grade">
                    <li><a class="active">不限</a></li>
                    <!-- <li><a>一年级</a></li>
                    <li><a>二年级</a></li>
                    <li><a>三年级</a></li>
                    <li><a>四年级</a></li>
                    <li><a>五年级</a></li>
                    <li><a>六年级</a></li>
                    <li><a>初一</a></li>
                    <li><a>初二</a></li>
                    <li><a>初三</a></li>
                    <li><a>高一</a></li>
                    <li><a>高二</a></li>
                    <li><a>高三</a></li> -->
                </ul>
            </div>
        </div>
        <div class="row">
            <div class="left">按学科选择</div>
            <div class="right">
                <ul id="subjectList" class="filter" type="subject">
                    <li><a class="active">不限</a></li>
                    <!-- <li><a>语文</a></li>
                    <li><a>数学</a></li>
                    <li><a>英语</a></li>
                    <li><a>生物</a></li>
                    <li><a>历史</a></li>
                    <li><a>政治</a></li>
                    <li><a>物理</a></li> -->
                </ul>
            </div>
        </div>
        <div class="row">
            <div class="left">按类别选择</div>
            <div class="right">
                <ul id="classifyList" class="filter" type="category">
                    <li><a class="active">不限</a></li>
                    <!-- <li><a>期中</a></li>
                    <li><a>期末</a></li>
                    <li><a>小升初</a></li> -->
                </ul>
            </div>
        </div>
        <div class="lesson">
            <ul id=kecheng>
                <!-- <li>
                    <div class="top">
                        <img src="../img/online/banner1-1.png" alt="" class="m">
                        <p>学科：英语</p>
                    </div>
                    <div class="bottom">
                        <div class="left">
                            <span>人教版语文第一节课程内容讲解</span>
                            <span class="time">地区：北京</span>
                        </div>
                        <div class="right">免费学习</div>
                    </div>
                </li> -->
            </ul>
        </div>

        <div class="pageNum">
            <!-- <button id="prevPage">上一页</button> -->
            <ul id="pageList" class="filter" type="page">
                <!-- <li class="active">1</li>
                <li>2</li>
                <li>3</li> -->
            </ul>
            <!-- <button class="active" id="nextPage">下一页</button> -->
        </div>
    </main>

    <footer>
        <div class="cont">
            <div class="main">
                <p>
                    首页 | 关于我们 | 加入我们 | 合作专区 | 联系我们 | AI开放平台 | 意见反馈 | 漏洞提交 | 隐私政策 | 版权声明 | 反盗链声明 | 网上有害信息举报 | 备案公示 | 营业执照 | 教师资格证公示

                </p>
                <p>
                    京ICP备 13030888号 Copyright © 2014-2019 行者信息科技（北京）有限公司 | 地址：北京市新华区马当路388号C座 | 电话：010-66666666 | 京公网安备 01010102002533号
                </p>
                <p>
                    京网文〔2018〕4086-308号 | 网络文化经营许可证：沪网文[2018]4086-308号 | 增值电信业务经营许可证：京B2-20150021 | 食品经营许可证：JY13101140088888
                </p>
                <p>医疗器械经营许可证：京嘉食药监械经营许20188008号 | 互联网药品信息服务资格证书：(京)-经营性-2018-0011 |</p>
            </div>
        </div>
    </footer>
    <!-- <script src="../js/ujiuye.js"></script> -->

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="../utils/http.js"></script>
    <!-- <script src="../js/U.js"></script> -->
    <!-- <script src="../js/online.js"></script> -->
    <script src="../js/U.js"></script>

    <script>
        let mid = localStorage.getItem('mid')
            //获取用户头像信息
        async function getUserIcon() {
            let {
                err,
                result
            } = await myAjax({
                url: '/api/user',
                data: {
                    mid
                }
            })
            console.log(result.result.head_photo_url);

            let userInfo = result.result
                //头像赋值
            $('#userimg').attr('src', userInfo.head_photo_url);
        }
        getUserIcon();
        // 登录后隐藏登录注册样式 显示用户头像的样式
        let isLogin = localStorage.getItem('token');
        console.log(isLogin);

        if (!isLogin) { //未登录状态 显示登录注册按钮
            $('#login a').css('display', 'inline-block');
            $('#userimg').css('display', 'none');
        } else { //登录状态  显示头像
            $('#login').css('display', 'none');
            $('#userimg').css('display', 'inline-block');
        }

        // 退出登录的方法
        $('.out').on('click', function() {
            localStorage.removeItem('mid');
            localStorage.removeItem('token');
            location.reload();
            location.href = './loginAndRegister/login.html';
        });

        //跳转到个人中心
        $('.person').on('click', function() {
            location.href = 'userSeting.html';
        });

        let filterData = { //这个就是存储筛选的条件
            page: 1,
            area: '', //代表按照地区筛选，如果为空不限制地区
            grade: '', //代表按照年级筛选，如果为空不限制年级
            category: '',
            subject: ''
        }


        //跳转到课程中心
        $('#coursesCenter').on('click', function() {
            location.href = 'course.html';
        });

        //跳转到搜索页
        $('#searchByKeyword').on('click', function() {
            // alert('ok')
            let keyword = $('#keyWord').val()
            if (keyword == '') {
                alert('请输入关键字进行搜索')
                return
            }
            location.href = './search_list.html?keyword=' + keyword
        })

        //为地区绑定事件，进行筛选
        $('.filter').on('click', 'li,button', function() { //jquery事件委托的语法
            //处理样式
            $(this).parent().find('a').removeClass('active')
            $(this).children().addClass('active')
            let value = $(this).attr('v') //获取具体要筛选的值
            let type = $(this).parent().attr('type')
            filterData[type] = value //type是变量，需要用中括号语法
            console.log(filterData, '筛选条件变了')
            getOnlineCourses(filterData)
        })


        //渲染地区数据
        async function getAreas() {
            let {
                err,
                result
            } = await myAjax({
                url: '/api/areas'
            })
            let str = ''
                //拼接字符串
            result.result.forEach(item => {
                    str += `<li v="${item.area_name}"><a>${item.area_name}</a></li>`
                })
                // console.log( str )
            $('#areaContainer').append(str) //append方法是追加，html()是替换
        }
        getAreas();

        //渲染年级数据
        async function getGrade() {
            let {
                err,
                result
            } = await myAjax({
                url: '/api/grades'
            });
            let str = ``;
            result.result.forEach(item => {
                str += ` <li v="${item.grade_name}"><a>${item.grade_name}</a></li>`;
            });
            $('#gradeList').append(str);
        }
        getGrade();

        //渲染学科数据
        async function getSuject() {
            let {
                err,
                result
            } = await myAjax({
                url: '/api/subjects'
            });

            let str = ``;
            result.result.forEach(item => {
                str += ` <li v="${item.subject_name}"><a>${item.subject_name}</a></li>`;
            });

            $('#subjectList').append(str);
        }
        getSuject();


        //渲染类别数据
        async function getClassify() {
            let {
                err,
                result
            } = await myAjax({
                url: '/api/cates'
            });

            let str = ``;
            result.result.forEach(item => {
                str += `<li v="${item.category_name}"><a>${item.category_name}</a></li>`;
            });
            $('#classifyList').append(str);
        }
        getClassify();



        //渲染列表页数据
        async function getOnlineCourses({
            page,
            area,
            grade,
            category,
            subject
        }) {
            let {
                err,
                result
            } = await myAjax({
                url: '/api/courses',
                method: 'get',
                data: {
                    page,
                    pageSize: 6,
                    area,
                    grade,
                    category,
                    subject
                }
            });
            let str = ``;
            result.result.data.forEach(function(item) {
                str += `
                     <li>
                        <a href='videoDetail.html?id=${item.cid}'>
                    <div class="top">
                        <img src="${item.image_src}" alt="" class="m">
                        <p>学科：${item.subject_name}</p>
                    </div>
                    <div class="bottom">
                        <div class="left">
                            <span>${item.title}</span>
                            <span class="time">地区：${item.area_name}</span>
                        </div>
                        <div class="right">${item.price ? item.price + '元' : '免费'}</div>
                    </div>
                    </a>
                </li> 
                    `;
            });

            $('#kecheng').html(str);
            //处理页码
            setPage(result.result.totalPage, result.result.page)

        }
        getOnlineCourses(filterData);


        // // //给分页添加绑定事件
        // let pageList = $('#pageList');
        // pageList.on('click', 'li,button', function() {
        //     let page = $(this).attr('page');
        //     filterData.page = page //分页这里只需要改 filterData里的page属性条件
        //     getOnlineCourses(filterData);
        // });


        // pageList.on('click', 'li', function(ev) {
        //     $('#pageList li').removeClass('active');
        //     $(this).addClass('active');
        // });

        //处理页码，但是这个函数得知道总页码
        function setPage(totalPage, page) {
            let prevPage = page - 0 - 1 == 0 ? 1 : page - 0 - 1 //上一页？
            let nextPage = page - 0 + 1 >= totalPage ? totalPage : page - 0 + 1 //下一页
            let str = `<button v="${prevPage}">上一页</button>`

            for (let i = 1; i <= totalPage; i++) {
                str += `<li v="${i}" class="${i == page ? 'active' : ''}">${i}</li>`
            }
            str += `<button v="${nextPage}">下一页</button>`
                // console.log( str )
            $('#pageList').html(str)
        }
    </script>
    <script src="../js/ujiuye.js"></script>


    <!-- <script>
        //跳转到搜索页
        $('#searchByKeyword').on('click', function() {
            // alert('ok')
            let keyword = $('#keyWord').val()
            if (keyword == '') {
                alert('请输入关键字进行搜索')
                return
            }
            location.href = './search_list.html?keyword=' + keyword
        })



        // //点击搜索按钮以后跳转到search_list.html页面
        // $('#searchByKeyword').on('click', function() {
        //     let content = $('#content').val();
        //     if (content == '') {
        //         alert('请输入关键字进行搜索')
        //         return
        //     }
        //     window.location.href = 'search_list.html?content=' + encodeURI(content);
        // });
        //渲染列表页数据
        async function getOnlineCourses(page = 1) {
            let {
                err,
                result
            } = await myAjax({
                url: '/api/courses',
                method: 'get',
                data: {
                    page,
                    pageSize: 6
                }
            });
            console.log(result);
            let str = ``;
            result.result.data.forEach(function(item) {
                str += `
                     <li>
                    <div class="top">
                        <img src="${item.image_src}" alt="" class="m">
                        <p>学科：${item.subject_name}</p>
                    </div>
                    <div class="bottom">
                        <div class="left">
                            <span>${item.title}</span>
                            <span class="time">地区：${item.area_name}</span>
                        </div>
                        <div class="right">免费学习</div>
                    </div>
                </li> 
                    `;
            });

            $('#kecheng').html(str);
            // //渲染分页
            // str = ``;
            // for (let i = 0; i < result.result.totalPage; i++) {
            //     str += `<li class=${i==0? 'active':''}>${i+1}</li>`;
            // }
            // $('#pageList').html(str);

            //处理页码
            setPage(result.result.totalPage, result.result.page)

        }
        getOnlineCourses();


        //筛选 热门城市
        let cityLis = $('#cityList li a');
        cityLis.on('click', function() {
            for (var i = 0; i < cityLis.length; i++) {
                //清除样式
                for (var i = 0; i < cityLis.length; i++) {
                    cityLis[i].className = '';
                }
                //给当前被点击的添加样式
                this.className = 'active';
            }
        });

        //筛选 按年级选择
        let gradeList = $('#gradeList li a');
        gradeList.on('click', function() {
            for (var i = 0; i < gradeList.length; i++) {
                //清除样式
                for (var i = 0; i < gradeList.length; i++) {
                    gradeList[i].className = '';
                }
                //给当前被点击的添加样式
                this.className = 'active';
            }
        });

        //筛选 按学科选择
        let subjectList = $('#subjectList li a');
        subjectList.on('click', function() {
            for (var i = 0; i < subjectList.length; i++) {
                //清除样式
                for (var i = 0; i < subjectList.length; i++) {
                    subjectList[i].className = '';
                }
                //给当前被点击的添加样式
                this.className = 'active';
            }
        });

        //筛选 按类别选择 
        let classifyList = $('#classifyList li a');
        classifyList.on('click', function() {
            for (var i = 0; i < classifyList.length; i++) {
                //清除样式
                for (var i = 0; i < classifyList.length; i++) {
                    classifyList[i].className = '';
                }
                //给当前被点击的添加样式
                this.className = 'active';
            }
        });

        // //给分页添加绑定事件
        let pageList = $('#pageList');
        pageList.on('click', 'li,button', function() {
            let page = $(this).attr('page');
            getOnlineCourses(page);
        });

        console.log($('#pageList li').length);
        // pageList.on('click', function(ev) {
        //     var e = ev || event; // 事件对象的兼容
        //     var target = e.target || e.srcElement; // 事件源的兼容
        //     // console.log(target.nodeName);
        //     // 对事件源进行判断

        //     if (target.nodeName === 'LI') {
        //         // target.style.backgroundColor = 'pink';
        //         // target.nextElementSibling = '';
        //         // target.siblingsNode.className = '';
        //         // U.removeClass(target.nextElementSibling, 'active');
        //         // U.removeClass(target.previousSibling, 'active')
        //         target.className = 'active';
        //     }
        // });

        pageList.on('click', 'li', function(ev) {
            $('#pageList li').removeClass('active');
            $(this).addClass('active');
        });




        // pageList.on('click', function() {
        //     for (var i = 0; i < lis.length; i++) {
        //         //清除样式
        //         for (var i = 0; i < lis.length; i++) {
        //             pageList[i].className = '';
        //         }
        //         //给当前被点击的添加样式
        //         this.className = 'active';
        //     }
        // });



        // $('#nextPage').on('click', function() {
        //     $('#nextPage').prev()
        //     return;
        //     $.ajax({
        //         url: 'http://localhost:3000/api/courses?area=&grade=&category=&subject=',
        //         data: {},
        //         method: 'get',
        //         success(res) {
        //             // console.log(res.result.data);
        //             let str = ``;
        //             res.result.data.forEach(function(item) {
        //                 console.log(item);
        //                 str += `
        //              <li>
        //             <div class="top">
        //                 <img src="${item.image_src}" alt="" class="m">
        //                 <p>学科：${item.subject_name}</p>
        //             </div>
        //             <div class="bottom">
        //                 <div class="left">
        //                     <span>${item.title}</span>
        //                     <span class="time">地区：${item.area_name}</span>
        //                 </div>
        //                 <div class="right">免费学习</div>
        //             </div>
        //         </li> 
        //             `;
        //             });
        //             $('#kecheng').html(str);

        //             //处理页码
        //             setPage(res.result.totalPage, res.result.page)
        //         }
        //     });
        // });

        //处理页码，但是这个函数得知道总页码
        function setPage(totalPage, page) {
            let prevPage = page - 0 - 1 == 0 ? 1 : page - 0 - 1 //上一页？
            let nextPage = page - 0 + 1 >= totalPage ? totalPage : page - 0 + 1 //下一页
            let str = `<button page="${prevPage}">上一页</button>`

            for (let i = 1; i <= totalPage; i++) {
                str += `<li page="${i}" class="${i==page ? 'active':''}">${i}</li>`
            }
            str += `<button page="${nextPage}">下一页</button>`
                // console.log( str )

            $('#pageList').html(str)
        }
    </script> -->

    <!-- <script>
        //点击搜索按钮以后跳转到search_list.html页面
        $('#searchByKeyword').on('click', function() {
            let content = $('#content').val();
            window.location.href = 'search_list.html?content=' + encodeURI(content);
        });

        //渲染列表页数据
        (function() {
            $.ajax({
                url: 'http://localhost:3000/api/courses?',
                data: {},
                method: 'get',
                success(res) {
                    // console.log(res.result.data);
                    let str = ``;
                    res.result.data.forEach(function(item) {
                        // console.log(item);
                        str += `
                     <li>
                    <div class="top">
                        <img src="${item.image_src}" alt="" class="m">
                        <p>学科：${item.subject_name}</p>
                    </div>
                    <div class="bottom">
                        <div class="left">
                            <span>${item.title}</span>
                            <span class="time">地区：${item.area_name}</span>
                        </div>
                        <div class="right">免费学习</div>
                    </div>
                </li> 
                    `;
                    });
                    $('#kecheng').html(str);
                    //渲染分页
                    str = ``;
                    for (let i = 0; i < res.result.totalPage; i++) {
                        str += `<li class=${i==0? 'active':''}>${i+1}</li>`;
                    }
                    $('#pageList').html(str);
                }
            });
        })();

        // //根据关键字搜索
        // $('#searchByKeyword').on('click', function() {
        //     let content = $('#content').val();
        //     console.log(content);
        //     $.ajax({
        //         url: 'http://localhost:3000/api/search?pageSize=&page=&keyword=' + content,
        //         method: 'get',
        //         success(res) {
        //             console.log(res.result.data);
        //             let str = ``;
        //             res.result.data.forEach(function(item) {
        //                 // console.log(item);
        //                 str += `
        //              <li>
        //             <div class="top">
        //                 <img src="${item.image_src}" alt="" class="m">
        //                 <p>学科：${item.subject_name}</p>
        //             </div>
        //             <div class="bottom">
        //                 <div class="left">
        //                     <span>${item.title}</span>
        //                     <span class="time">地区：${item.area_name}</span>
        //                 </div>
        //                 <div class="right">免费学习</div>
        //             </div>
        //         </li> 
        //             `;
        //             });
        //             $('#kecheng').html(str);
        //             str = ``;
        //             for (let i = 0; i < res.result.totalPage; i++) {
        //                 str += `<li class=${i==0? 'active':''}>${i+1}</li>`;
        //             }
        //             $('#pageList').html(str);

        //         }
        //     });
        // });

        // //筛选 热门城市
        // let cityLis = $('#cityList li a');
        // cityLis.on('click', function() {
        //     for (var i = 0; i < cityLis.length; i++) {
        //         //清除样式
        //         for (var i = 0; i < cityLis.length; i++) {
        //             cityLis[i].className = '';
        //         }
        //         //给当前被点击的添加样式
        //         this.className = 'active';
        //     }
        // });

        // //筛选 按年级选择
        // let gradeList = $('#gradeList li a');
        // gradeList.on('click', function() {
        //     for (var i = 0; i < gradeList.length; i++) {
        //         //清除样式
        //         for (var i = 0; i < gradeList.length; i++) {
        //             gradeList[i].className = '';
        //         }
        //         //给当前被点击的添加样式
        //         this.className = 'active';
        //     }
        // });

        // //筛选 按学科选择
        // let subjectList = $('#subjectList li a');
        // subjectList.on('click', function() {
        //     for (var i = 0; i < subjectList.length; i++) {
        //         //清除样式
        //         for (var i = 0; i < subjectList.length; i++) {
        //             subjectList[i].className = '';
        //         }
        //         //给当前被点击的添加样式
        //         this.className = 'active';
        //     }
        // });

        // //筛选 按类别选择 
        // let classifyList = $('#classifyList li a');
        // classifyList.on('click', function() {
        //     for (var i = 0; i < classifyList.length; i++) {
        //         //清除样式
        //         for (var i = 0; i < classifyList.length; i++) {
        //             classifyList[i].className = '';
        //         }
        //         //给当前被点击的添加样式
        //         this.className = 'active';
        //     }
        // });

        // //给分页添加绑定事件
        // let pageList = $('#pageList li');
        // // console.log(pageList);
        // pageList.on('click', function() {
        //     for (var i = 0; i < pageList.length; i++) {
        //         //清除样式
        //         for (var i = 0; i < pageList.length; i++) {
        //             pageList[i].className = '';
        //         }
        //         //给当前被点击的添加样式
        //         this.className = 'active';
        //     }
        // });



        $('#nextPage').on('click', function() {
            $('#nextPage').prev()
            return;
            $.ajax({
                url: 'http://localhost:3000/api/courses?area=&grade=&category=&subject=',
                data: {},
                method: 'get',
                success(res) {
                    // console.log(res.result.data);
                    let str = ``;
                    res.result.data.forEach(function(item) {
                        console.log(item);
                        str += `
                     <li>
                    <div class="top">
                        <img src="${item.image_src}" alt="" class="m">
                        <p>学科：${item.subject_name}</p>
                    </div>
                    <div class="bottom">
                        <div class="left">
                            <span>${item.title}</span>
                            <span class="time">地区：${item.area_name}</span>
                        </div>
                        <div class="right">免费学习</div>
                    </div>
                </li> 
                    `;
                    });
                    $('#kecheng').html(str);
                }
            });
        });
    </script> -->
</body>

</html>